<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文字和字体的样式</title>
    <style type="text/css">
        /*
        粗体
        倾斜
        下划线  中划线  上划线
        字的颜色
        字的大小
        字体
        */

        #div01{
            font-weight: bold;
            font-style: italic;
            /*
            underline:  下划线
            overline: 上划线

            */
            text-decoration:line-through;
            color:red;
            font-size: 20px;
            font-family: 宋体;
        }
        #div02{
            /*
            capitalize：
            将每个单词的第一个字母转换成大写
            uppercase：
            转换成大写
            lowercase：
            转换成小写
            */
            text-transform: capitalize;
        }
        #div03{
            letter-spacing: 5px;
        }

        #div04{
            text-indent: 2em;
        }
        #div05{
            /*显示div的边框*/
            width: 200px;
            height: 50px;
            border: 1px solid red;
            /*左右居中*/
            text-align: center;
            /*上下居中*/
            line-height: 50px;
        }

        #div06{
            /*显示div的边框*/
            width: 200px;
            height: 25px;
            border: 1px solid red;
            line-height: 25px;

            /*
            第一个属性：当内容超出边界时不换行
            第二属性：超出边界的内容省略掉
            第三属性： 当文本内容超出边界需要显示省略号
            */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }



    </style>
</head>
<body>
<div id="div01">
    我是div里的内容！
</div>
<div id="div02">
    abc def hij
</div>
<div id="div03">
    abcdef
</div>

<div id="div04">
    <p>
    我是div里的内容。我是div里的内容。我是div里的内容。我是div里的内容。我是div里的内容。我是div里的内容。我是div里的内容。我是div里的内容。我是div里的内容。我是div里的内容。我是div里的内容。我是div里的内容。
    </p>
</div>
<div id="div05">
    我是div里的内容！
</div>
<br/>
<div id="div06">
    我是div里的内容！我是div里的内容！我是div里的内容！我是div里的内容！我是div里的内容！我是div里的内容！我是div里的内容！我是div里的内容！我是div里的内容！我是div里的内容！
</div>





</body>
</html>